import React, { useEffect } from "react";
import { modalPropsType } from "@/constants/types";
import { Modal, Form, Row, Col, DatePicker, Input, message } from "antd";
import XlUpload from "@/components/Form/XlUpload";
import { isEmptyObj } from "@/utils/util";
import { markBookingCar, markArriveDomesticWh, markDelivery, markSign } from "../../services";
import { useRequest } from "ahooks";

const {Item} = Form;
const rules = [{required: true}];
const labelCol = {span: 3}

const OrderMakeUp = ({title, visible, onCancel, onSubmit, currentRow}: modalPropsType) => {
  const [form] = Form.useForm();
  const makeUpMaps: any = {
    markBookingCar: {
      title: "已约车",
      api: markBookingCar
    },
    markArriveDomesticWh: {
      title: "已到仓",
      api: markArriveDomesticWh

    },
    markDelivery: {
      title: "已派送",
      api: markDelivery

    },
    markSign: {
      title: "已签收",
      api: markSign
    },
  }

  const {loading, runAsync} = useRequest(async (params: any, type: string) => {
    const res = await makeUpMaps?.[type]?.api(params);
    return res; 
  }, {manual: true});
  
  const handleSubmit =async () => {
    const formRes = await form.validateFields();
    if (!currentRow?.makeUpFlag || !makeUpMaps?.[currentRow?.makeUpFlag]) {
      return ;
    }
    const res = await runAsync({
      ...formRes,
      name: undefined,
      orderId: currentRow?.id,
      businessTime: formRes?.businessTime?.format("YYYY-MM-DD HH:mm:ss"),
      attachmentsName: formRes?.attachmentsPath?.[0]?.name,
      attachmentsPath: formRes?.attachmentsPath?.[0]?.responseUrl
    }, currentRow?.makeUpFlag);
    if (res?.code === "0") {
      message.success("操作成功!");
      onSubmit();
    }
  }

  useEffect(() => {
    if (isEmptyObj(currentRow) || !currentRow?.makeUpFlag || !makeUpMaps?.[currentRow?.makeUpFlag]) {
      form.resetFields();
      return ;
    }
    form.setFieldValue("name", makeUpMaps?.[currentRow?.makeUpFlag]?.title);
  }, [JSON.stringify(currentRow)])

  return (
    <Modal
      title={title}
      open={visible}
      confirmLoading={loading}
      maskClosable={false}
      onCancel={onCancel}
      onOk={handleSubmit}
      width="700px"
    >
      <Form form={form} labelCol={labelCol}>
        <Row>
          <Col span={12}>
            <Item label="业务时间" name="businessTime" rules={rules} labelCol={{span: 6}}>
              <DatePicker showTime />
            </Item>
          </Col>
          <Col span={12}>
            <Item label="轨迹" name="name" rules={rules} labelCol={{span: 6}}>
              <Input disabled />
            </Item>
          </Col>
        </Row>
        {
          currentRow?.makeUpFlag === "markDelivery" && (
            <Item label="ISA" name="attachmentsPath">
              <XlUpload uploadParams={{businessCode:'isa'}} />
            </Item>
          )
        }
        {
          currentRow?.makeUpFlag === "markSign" && (
            <Item label="POD" name="attachmentsPath" rules={rules}>
              <XlUpload uploadParams={{businessCode:'pod'}} />
            </Item>
          )
        }
        <Item label="原因备注" name="remark">
          <Input.TextArea rows={3} />
        </Item>
      </Form>
    </Modal>
  );
}
export default OrderMakeUp;